<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-07-19 18:15:59
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-07-19 18:45:00
-->
<template>
  <div>
    <div id="div2">
      <div style="width:100%; height:100%; overflow:hidden;">
        <h2>完美的拖拽</h2>
        <p>体验不错的JavaScript网页拖动，除了拖动，还可拖动放大，像Windows窗口一样被放大或缩小，只要按住层的右下角，就可以收放自如的放大或缩小。想使用的朋友，可将代码里的Js封装成类，从外部引入想必更合理些。'
        </p>
        <div id="right"></div>
        <div id="div1">拖</div>
        <div id="bottom"></div>
      </div>
    </div>
    <div id="zhezhao"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    mounted() {
      var oDiv = document.getElementById("div1");
      var oDiv2 = document.getElementById("div2");
      var zhezhao = document.getElementById("zhezhao");
      var h2 = oDiv2.getElementsByTagName("h2")[0];
      var right = document.getElementById("right");
      var bottom = document.getElementById("bottom");
      var mouseStart = {};
      var divStart = {};
      var rightStart = {};
      var bottomStart = {};
      //往右拽
      right.onmousedown = function (ev) {
        var oEvent = ev || event;
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        rightStart.x = right.offsetLeft;
        if (right.setCapture) {
          right.onmousemove = doDrag1;
          right.onmouseup = stopDrag1;
          right.setCapture();
        }
        else {
          document.addEventListener("mousemove", doDrag1, true);
          document.addEventListener("mouseup", stopDrag1, true);
        }
      };
      function doDrag1(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - mouseStart.x + rightStart.x;
        var w = l + oDiv.offsetWidth;

        if (w < oDiv.offsetWidth) {
          w = oDiv.offsetWidth;
        }
        else if (w > document.documentElement.clientWidth - oDiv2.offsetLeft) {
          w = document.documentElement.clientWidth - oDiv2.offsetLeft - 2;
        }
        oDiv2.style.width = w + "px";
      };
      function stopDrag1() {
        if (right.releaseCapture) {
          right.onmousemove = null;
          right.onmouseup = null;
          right.releaseCapture();
        }
        else {
          document.removeEventListener("mousemove", doDrag1, true);
          document.removeEventListener("mouseup", stopDrag1, true);
        }
      };
      //往下拽
      bottom.onmousedown = function (ev) {
        var oEvent = ev || event;
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        bottomStart.y = bottom.offsetTop;
        if (bottom.setCapture) {
          bottom.onmousemove = doDrag2;
          bottom.onmouseup = stopDrag2;
          bottom.setCapture();
        }
        else {
          document.addEventListener("mousemove", doDrag2, true);
          document.addEventListener("mouseup", stopDrag2, true);
        }
      };
      function doDrag2(ev) {
        var oEvent = ev || event;
        var t = oEvent.clientY - mouseStart.y + bottomStart.y;
        var h = t + oDiv.offsetHeight;

        if (h < oDiv.offsetHeight) {
          h = oDiv.offsetHeight;
        }
        else if (h > document.documentElement.clientHeight - oDiv2.offsetTop) {
          h = document.documentElement.clientHeight - oDiv2.offsetTop - 2;
        }

        oDiv2.style.height = h + "px";
      };
      function stopDrag2() {
        if (bottom.releaseCapture) {
          bottom.onmousemove = null;
          bottom.onmouseup = null;
          bottom.releaseCapture();
        }
        else {
          document.removeEventListener("mousemove", doDrag2, true);
          document.removeEventListener("mouseup", stopDrag2, true);
        }
      };
      //往左右同时拽
      oDiv.onmousedown = function (ev) {
        var oEvent = ev || event;
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        divStart.x = oDiv.offsetLeft;
        divStart.y = oDiv.offsetTop;
        if (oDiv.setCapture) {
          oDiv.onmousemove = doDrag;
          oDiv.onmouseup = stopDrag;
          oDiv.setCapture();
        }
        else {
          document.addEventListener("mousemove", doDrag, true);
          document.addEventListener("mouseup", stopDrag, true);
        }
        zhezhao.style.display = 'block';
      };
      function doDrag(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - mouseStart.x + divStart.x;
        var t = oEvent.clientY - mouseStart.y + divStart.y;


        var w = l + oDiv.offsetWidth;
        var h = t + oDiv.offsetHeight;

        if (w < oDiv.offsetWidth) {
          w = oDiv.offsetWidth;
        }
        else if (w > document.documentElement.clientWidth - oDiv2.offsetLeft) {
          w = document.documentElement.clientWidth - oDiv2.offsetLeft - 2;
        }
        if (h < oDiv.offsetHeight) {
          h = oDiv.offsetHeight;
        }
        else if (h > document.documentElement.clientHeight - oDiv2.offsetTop) {
          h = document.documentElement.clientHeight - oDiv2.offsetTop - 2;
        }

        oDiv2.style.width = w + "px";
        oDiv2.style.height = h + "px";
      };
      function stopDrag() {
        if (oDiv.releaseCapture) {
          oDiv.onmousemove = null;
          oDiv.onmouseup = null;
          oDiv.releaseCapture();
        }
        else {
          document.removeEventListener("mousemove", doDrag, true);
          document.removeEventListener("mouseup", stopDrag, true);
        }
        zhezhao.style.display = 'none';
      };

      //h2完美拖拽
      h2.onmousedown = function (ev) {
        var oEvent = ev || event;
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        divStart.x = oDiv2.offsetLeft;
        divStart.y = oDiv2.offsetTop;

        if (h2.setCapture) {
          h2.onmousemove = doDrag3;
          h2.onmouseup = stopDrag3;
          h2.setCapture();
        }
        else {
          document.addEventListener("mousemove", doDrag3, true);
          document.addEventListener("mouseup", stopDrag3, true);
        }

        zhezhao.style.display = 'block';
      };
      function doDrag3(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - mouseStart.x + divStart.x;
        var t = oEvent.clientY - mouseStart.y + divStart.y;
        if (l < 0) {
          l = 0;
        }
        else if (l > document.documentElement.clientWidth - oDiv2.offsetWidth) {
          l = document.documentElement.clientWidth - oDiv2.offsetWidth;
        }
        if (t < 0) {
          t = 0;
        }
        else if (t > document.documentElement.clientHeight - oDiv2.offsetHeight) {
          t = document.documentElement.clientHeight - oDiv2.offsetHeight;
        }
        oDiv2.style.left = l + "px";
        oDiv2.style.top = t + "px";
      };
      function stopDrag3() {
        if (h2.releaseCapture) {
          h2.onmousemove = null;
          h2.onmouseup = null;
          h2.releaseCapture();
        }
        else {
          document.removeEventListener("mousemove", doDrag3, true);
          document.removeEventListener("mouseup", stopDrag3, true);
        }

        zhezhao.style.display = 'none';
      }
    },
  }
</script>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  #zhezhao {
    width: 100%;
    height: 100%;
    background: #f00;
    filter: alpha(opacity:0);
    opacity: 0;
    z-index: 9999;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }

  #div2 {
    width: 200px;
    height: 200px;
    position: relative;
    background: #EEEEEE;
    border: 1px solid #f00;
  }

  #div1 {
    width: 15px;
    height: 15px;
    background: #99CC00;
    position: absolute;
    right: 0px;
    bottom: 0px;
    cursor: nw-resize;
    overflow: hidden;
    font-size: 12px;
    text-align: center;
    line-height: 15px;
    color: #FFFFFF;
    float: right;
    z-index: 3;
  }

  #right {
    width: 15px;
    height: 100%;
    background: #f00;
    float: right;
    position: absolute;
    right: 0;
    top: 0;
    cursor: e-resize;
    overflow: hidden;
    filter: alpha(opacity:0);
    opacity: 0;
    z-index: 1;
  }

  #bottom {
    width: 100%;
    height: 15px;
    background: #f00;
    position: absolute;
    left: 0;
    bottom: 0;
    cursor: n-resize;
    overflow: hidden;
    filter: alpha(opacity:0);
    opacity: 0;
    z-index: 1;
  }

  #div2 p {
    padding: 10px;
    line-height: 24px;
    font-size: 13px;
    text-indent: 24px;
    color: #996600;
  }

  #div2 h2 {
    width: 100%;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    background: #CC9900;
    color: #FFFFFF;
    text-indent: 15px;
    cursor: move;
    overflow: hidden;
  }
</style>